<!--
 @description 文件搜索
 @fileName FileSearch.vue
 @author zengqiongying
 @created 2023/04/13 18:47:54
-->
<template>
  <div>
    <div class="ctm-content-head-fixed">
      <SearchInput
        v-model="inputValue"
        focus
        placeholder="搜索内容"
        @search="onSearch"
        @clear="onClear"
        @cancel="onSearch"
      />
    </div>
    <div class="search-result">
      <FileList :search-value="searchValue" />
    </div>
  </div>
</template>

<script lang="ts">
  import { ref } from 'vue'
  import SearchInput from '@/components/SearchInput/index.vue'
  import FileList from './components/FileList.vue'
  export default {
    name: 'FileSearch',
    components: { SearchInput, FileList },
    setup() {
      const searchValue = ref('')
      const inputValue = ref('')
      const onSearch = () => {
        searchValue.value = inputValue.value
      }
      const onClear = () => {
        searchValue.value = ''
      }
      return {
        searchValue,
        inputValue,
        onSearch,
        onClear
      }
    }
  }
</script>
<style lang="less" scoped>
  .search-result {
    padding-top: 44px;
    height: calc(100vh - 88px);
    box-sizing: border-box;
  }
</style>
